<template>
	<view class="goods" :class="{ 'lucency-goods': data.list_style == 4 && data.card_style == 5 }" :style="{ backgroundColor: data.background_color, padding: data.margin + 'px 0', 'border-radius': data.card_style == 5 ? data.layout_radius + 'px' : 0 }">
		<view class="lucency-title" v-if="data.card_style == 5">
		  <view>{{ data.title || "标题" }}</view>
		  <view>{{ data.ctitle || "更多 >" }}</view>
		</view>
		
		<view class="goods-layout" :style="{ paddingLeft: data.padding + 'px', paddingRight: data.padding + 'px', marginLeft: -data.spacing / 2 + 'px', marginRight: -data.spacing / 2 + 'px' }" :class="{ larger: data.list_style == 1, small: data.list_style == 2, list: data.list_style == 3, swipe: data.list_style == 4 }">
			<view class="goods-wrapper" :class="{ white: data.card_style == 1, card: data.card_style == 2, stroke: data.card_style == 3, lucency: data.card_style == 4, chamfer: data.chamfer_style }" v-for="(item, index) in data.list" :key="index">
				<view class="goods-item" :style="{ margin: data.spacing / 2 + 'px' }" @click="jump(item.link)" v-if="item.name != '商品名称'">
					<view class="goods-item-photo">
						<view class="goods-item-image">
							<view class="goods-item-cover">
								<image lazy-load style="width: 100%; height: 100%" :src="item.image" :mode="mode"></image>
							</view>
						</view>
					</view>
					<view class="goods-item-detail" v-if="is_hide">
						<view class="goods-item-title" v-if="data.is_title">
						{{ item.name }}
						</view>
						<view class="goods-item-info">
							<view class="goods-item-price">
								<view v-if="data.is_price">
									<text class="goods-item-price-prefix">¥</text>
									<text class="goods-item-price-value">{{ item.sell_price }}</text>
								</view>
							</view>
							<view class="goods-item-button" v-if="data.is_button">
								<uni-icons type="cart" color="#ef5959" size="20"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="clear"></view>
		</view>
	</view>
</template>

<script setup>
	import { navigateTo } from "@/el-ui/libs/navigate";
	import { computed } from "vue";
	
	const props = defineProps({
		data: {
			type: Object,
			default: function() {
				return {};
			}
		}
	});
	
	const mode = computed(()=>{
		return props.data.list_style === 1 ? 'center' : 'aspectFill';
	});
	
	const is_hide = computed(()=>{
		return props.data.list_style !== 3 ? !(!props.data.is_title && !props.data.is_price && !props.data.is_button) : true;
	});
	
	const jump = (value)=>{
		navigateTo(value.path);
	}
	
</script>

<style lang="scss">
.goods {
  overflow: hidden;
  .clear {
    clear: both;
  }

  .chamfer {
    .goods-item {
      border-radius: 16rpx;
    }
  }

  .card {
    .goods-item {
      box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.05);
    }
  }

  .stroke {
    .goods-item {
      border: 1px solid rgba(50, 50, 51, 0.1);
    }
  }

  .lucency {
    .goods-item {
      background-color: transparent;
    }
  }

  .goods-item {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: #ffffff;
    overflow: hidden;

    .goods-item-photo {
      position: relative;

      .goods-item-image {
        position: relative;
        max-height: 500rpx;
        overflow: hidden;
        padding-top: 50%;
      }

      .goods-item-cover {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        background-repeat: no-repeat;
        background-position: 50%;
        background: #f3f5f7;
        background-size: cover;
      }
    }

    .goods-item-cover {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: cover;
    }

    .goods-item-detail {
      margin: 20rpx 20rpx 10rpx 20rpx;
      position: relative;

      .goods-item-title {
        font-size: 28rpx;
        font-weight: 400;
        color: #353535;
        line-height: 1.4em;
        min-height: 2.8em;
        margin-bottom: 10rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .goods-item-info {
        position: relative;
        width: 100%;
        line-height: 2em;
        display: flex;
        font-weight: 400;
        justify-content: space-between;
      }

      .goods-item-price {
        display: inline-block;
        font-weight: 400;
		color: red;

        .goods-item-price-prefix {
          font-size: 24rpx;
          padding-right: 4rpx;
        }

        .goods-item-price-value {
          font-size: 28rpx;
        }
      }

      .goods-item-button {
        display: inline-block;
      }
    }
  }

  .larger {
    .goods-item-photo {
      .goods-item-image {
        height: 25%;
      }
    }
  }

  .small, .list, .swipe {
    .goods-item-photo {
      .goods-item-image {
        padding-top: 100%;
      }
    }
  }

  .small {
    .goods-wrapper {
      float: left;
      width: 50%;
    }
  }

  .list {
    .goods-item-photo {
      float: left;
      width: 240rpx;
      height: 240rpx;
      min-height: auto;
      margin-right: 20rpx;
    }

    .goods-item-detail {
      height: 240rpx;
      box-sizing: border-box;
      margin: 0 30rpx 0 240rpx;
      overflow: hidden;

      .goods-item-title {
        font-weight: 400;
        margin: 28rpx 0 0;
      }

      .goods-item-info {
        position: absolute;
        left: 0;
        bottom: 10rpx;
      }
    }
  }

  .swipe {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin-bottom: -20rpx;
    padding-bottom: 20rpx;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    .goods-wrapper {
      flex: 0 0 33.333%;
	  float: none;
	  width: 100%;
    }
  }
}
.lucency-goods {
  width: 93%;
  margin: 0 auto;
  background-color: #fff;
  .lucency-title {
    display: flex;
    flex-wrap: nowrap;
    height: 100rpx;
    line-height: 100rpx;
    view {
      &:nth-child(1) {
        width: 45%;
        font-size: 30rpx;
        font-weight: bold;
        text-align: left;
        margin-left: 5%;
      }
      &:nth-child(2) {
        width: 46%;
        font-size: 26rpx;
        text-align: right;
      }
    }
  }
}
</style>